<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>经济数据可视化</title>
    <style>
        .tabs {
            display: flex;
            margin-bottom: 20px;
        }
        .tab {
            padding: 10px 20px;
            cursor: pointer;
            background-color: #f0f0f0;
            border: 1px solid #ddd;
        }
        .tab.active {
            background-color: #007BFF;
            color: white;
        }
        .grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }
        .card {
            border: 1px solid #ddd;
            padding: 10px;
        }
        .chart-container {
            width: 100%;
            height: 200px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div class="tabs">
        <div class="tab active" data-category="分类一">分类一</div>
        <div class="tab" data-category="分类二">分类二</div>
        <div class="tab" data-category="分类三">分类三</div>
    </div>
    <div class="grid-container"></div>

    <script>
        const tabs = document.querySelectorAll('.tab');
        const gridContainer = document.querySelector('.grid-container');

        function loadData(category) {
            fetch(`/get_data/${category}`)
               .then(response => response.json())
               .then(data => {
                    gridContainer.innerHTML = '';
                    data.forEach(item => {
                        const card = document.createElement('div');
                        card.className = 'card';
                        card.innerHTML = `
                            <h3>${item.title}</h3>
                            <div class="chart-container" id="chart-${item.id}"></div>
                        `;
                        gridContainer.appendChild(card);

                        const chartDom = document.getElementById(`chart-${item.id}`);
                        const myChart = echarts.init(chartDom);
                        const option = {
                            xAxis: {
                                type: 'category',
                                data: item.dates
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                data: item.values,
                                type: 'line'
                            }]
                        };
                        myChart.setOption(option);
                    });
                });
        }

        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                tabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                const category = tab.dataset.category;
                loadData(category);
            });
        });

        // 初始化加载第一个分类的数据
        const firstTab = tabs[0];
        firstTab.click();
    </script>
</body>
</html>